import React, { useEffect, useRef } from 'react';
import { View, StyleSheet, Animated, Easing } from 'react-native';
import { COLORS } from '../styles/constants';

/**
 * 骨架屏加载组件
 */
export default function SkeletonLoader({
  width = '100%',
  height = 100,
  borderRadius = 8,
  style,
}) {
  const shimmerAnimation = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const shimmer = Animated.loop(
      Animated.sequence([
        Animated.timing(shimmerAnimation, {
          toValue: 1,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
        Animated.timing(shimmerAnimation, {
          toValue: 0,
          duration: 1000,
          easing: Easing.linear,
          useNativeDriver: true,
        }),
      ]),
    );

    shimmer.start();

    return () => shimmer.stop();
  }, [shimmerAnimation]);

  const opacity = shimmerAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [0.3, 0.7],
  });

  return (
    <Animated.View
      style={[
        styles.skeleton,
        {
          width,
          height,
          borderRadius,
          opacity,
        },
        style,
      ]}
    />
  );
}

/**
 * 瀑布流骨架屏
 */
export function MasonrySkeletonLoader() {
  return (
    <View style={styles.masonryContainer}>
      <View style={styles.masonryColumn}>
        <SkeletonLoader width="100%" height={180} style={styles.masonryItem} />
        <SkeletonLoader width="100%" height={140} style={styles.masonryItem} />
      </View>
      <View style={styles.masonryColumn}>
        <SkeletonLoader width="100%" height={140} style={styles.masonryItem} />
        <SkeletonLoader width="100%" height={180} style={styles.masonryItem} />
      </View>
    </View>
  );
}

/**
 * 横向滚动骨架屏
 */
export function HorizontalSkeletonLoader() {
  return (
    <View style={styles.horizontalContainer}>
      <SkeletonLoader width={200} height={120} style={styles.horizontalItem} />
      <SkeletonLoader width={200} height={120} style={styles.horizontalItem} />
      <SkeletonLoader width={200} height={120} style={styles.horizontalItem} />
    </View>
  );
}

/**
 * 美食网格骨架屏
 */
export function FoodGridSkeletonLoader() {
  return (
    <View style={styles.foodGridContainer}>
      <SkeletonLoader width="48%" height={100} style={styles.foodItem} />
      <SkeletonLoader width="48%" height={100} style={styles.foodItem} />
      <SkeletonLoader width="48%" height={100} style={styles.foodItem} />
      <SkeletonLoader width="48%" height={100} style={styles.foodItem} />
    </View>
  );
}

/**
 * 地图骨架屏
 */
export function MapSkeletonLoader() {
  return (
    <View style={styles.mapContainer}>
      <SkeletonLoader width="100%" height={250} borderRadius={12} />
      <View style={styles.mapOverlay}>
        <SkeletonLoader
          width={120}
          height={40}
          borderRadius={20}
          style={styles.mapLocationBubble}
        />
        <SkeletonLoader
          width={40}
          height={40}
          borderRadius={20}
          style={styles.mapButton}
        />
      </View>
    </View>
  );
}

/**
 * 头部信息骨架屏
 */
export function HeaderSkeletonLoader() {
  return (
    <View style={styles.headerContainer}>
      <View style={styles.headerTop}>
        <SkeletonLoader width={100} height={28} borderRadius={14} />
        <SkeletonLoader width={120} height={24} borderRadius={12} />
      </View>
      <View style={styles.headerStats}>
        <SkeletonLoader width={150} height={24} borderRadius={12} />
      </View>
    </View>
  );
}

/**
 * 完整首页骨架屏（首次加载时使用）
 */
export function FullHomeSkeletonLoader() {
  return (
    <View style={styles.fullHomeContainer}>
      {/* 头部 */}
      <HeaderSkeletonLoader />

      {/* 搜索框 */}
      <View style={styles.searchSkeletonContainer}>
        <SkeletonLoader width="100%" height={48} borderRadius={24} />
      </View>

      {/* 地图 */}
      <MapSkeletonLoader />

      {/* 景区标题 */}
      <View style={styles.sectionTitleSkeleton}>
        <SkeletonLoader width={140} height={24} borderRadius={12} />
      </View>

      {/* 景区瀑布流 */}
      <MasonrySkeletonLoader />

      {/* 周边景区标题 */}
      <View style={styles.sectionTitleSkeleton}>
        <SkeletonLoader width={100} height={24} borderRadius={12} />
      </View>

      {/* 周边景区 */}
      <HorizontalSkeletonLoader />
    </View>
  );
}

const styles = StyleSheet.create({
  skeleton: {
    backgroundColor: COLORS.background.tertiary,
  },
  masonryContainer: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    gap: 12,
  },
  masonryColumn: {
    flex: 1,
    gap: 12,
  },
  masonryItem: {
    marginBottom: 0,
  },
  horizontalContainer: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    gap: 12,
  },
  horizontalItem: {
    marginRight: 0,
  },
  foodGridContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingHorizontal: 16,
    justifyContent: 'space-between',
    gap: 12,
  },
  foodItem: {
    marginBottom: 0,
  },
  mapContainer: {
    position: 'relative',
    marginHorizontal: 16,
    marginBottom: 16,
  },
  mapOverlay: {
    position: 'absolute',
    top: 12,
    left: 12,
    right: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  mapLocationBubble: {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
  },
  mapButton: {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
  },
  headerContainer: {
    paddingHorizontal: 16,
    paddingVertical: 16,
    gap: 12,
  },
  headerTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  headerStats: {
    flexDirection: 'row',
    gap: 16,
  },
  fullHomeContainer: {
    flex: 1,
    backgroundColor: COLORS.background.secondary,
  },
  searchSkeletonContainer: {
    paddingHorizontal: 16,
    marginBottom: 16,
  },
  sectionTitleSkeleton: {
    paddingHorizontal: 16,
    marginTop: 20,
    marginBottom: 12,
  },
});
